<template>
  <div class="wrap">
    <div class="info">
      <h2>您好！</h2>
      <p>欢迎来到职业帮，立即注册</p>
    </div>
    <div class="form">
      <div class="item first">
        <input type="text"
          v-model="state.phone"
          placeholder="请输入手机号码"> <i>+86</i>
      </div>

      <div class="item">
        <input type="text"
          v-model="state.code"
          placeholder="请输入验证码"> <span>获取验证码</span>
      </div>
    </div>
    <div class="btn"
      @click="login">
      登 录
    </div>
    <div class="methods">
      <span>其他登录方式</span>

    </div>
  </div>
</template>


<script lang="ts" setup>
  import { reactive, getCurrentInstance } from 'vue'
  import { Toast } from 'vant'
  import { phoneLogin } from '@/api/user'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { genTestUserSig } from '../../../debug/GenerateTestUserSig.js'
  const { proxy } = getCurrentInstance()
  const store = useStore()
  const router = useRouter()
  // 修改登陆状态
  const setIsReady = () => store.commit('setIsReady', true)
  const state = reactive({
    phone: '18819777919',
    code: '1234'
  })

  const login = async () => {
    console.log('logintim==>', proxy.tim)
    console.log(state)
    if (state.phone.trim() == '') {
      Toast('手机号码不能为空')
      return
    }
    if (state.code.trim() == '') {
      Toast('手机验证码不能为空')
      return
    }
    let reg = /^1[3-9]\d{9}$/
    if (!reg.test(state.phone)) {
      Toast('手机号码格式不正确！')
      return
    }

    // 合法，调用手机登录接口
    let response = await phoneLogin(state)

    console.log(response)
    if (response.statusCode == 200) {
      Toast('登录成功')
      /*1. 记录登录的标识 */
      localStorage.setItem('token', response.data.token)
      localStorage.setItem('userinfo', JSON.stringify(response.data.userInfo))

      //tim通讯登陆模块
      let onSdkReady = function (event) {
        setIsReady(true)
        console.log('登陆成功', event)
      }

      proxy.tim.on(proxy.TIM.EVENT.SDK_READY, onSdkReady)

      let promise = proxy.tim.login({
        userID: response.data.userInfo.name,
        userSig: genTestUserSig(response.data.userInfo.name).userSig
      })
      promise
        .then(function (imResponse) {
          console.log('imResponse.data==>', imResponse.data) // 登录成功
          if (imResponse.data.repeatLogin === true) {
            // 标识帐号已登录，本次登录操作为重复登录。v2.5.1 起支持
            console.log(imResponse.data.errorInfo)
          }
        })
        .catch(function (imError) {
          console.warn('login error:', imError) // 登录失败的相关信息
        })

      router.push('/my')
    } else {
      Toast(response.message)
    }
  }
</script>


<style lang="less" scoped>
input::-webkit-input-placeholder {
  font-size: 14px;
  color: #d8d8d8;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 14px;
  color: #d8d8d8;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 14px;
  color: #d8d8d8;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-size: 14px;
  color: #d8d8d8;
}

.wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;

  padding: 0 50px;

  padding-bottom: 33px;
  padding-top: 115px;

  display: flex;

  flex-direction: column;
  justify-content: space-between;

  /*align-items: center;*/

  .info {
    h2 {
      font-size: 25px;
      color: #181818;
      font-weight: 700;
      padding-bottom: 15px;
    }

    p {
      font-size: 18px;
      color: #333333;
    }
  }

  .form {
    margin-top: 75px;
    .item {
      height: 50px;
      border-bottom: 1px solid #cccccc;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.first {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;

        i {
          width: 25px;
          height: 10px;
          margin-right: 20px;
        }

        input {
          flex: 1;
        }
      }

      input {
        height: 100%;
        outline: none;
        border: none;
      }

      span {
        border: 1px solid #149639;
        background-color: #fff;
        color: #149639;
        height: 25px;
        border-radius: 12.5px;
        line-height: 25px;
        padding: 0 9px;
      }
    }
  }

  .btn {
    margin-top: 115px;
    width: 100%;
    height: 44px;
    line-height: 44px;
    /**height: 0.88rem;
            line-height: 0.88rem;**/
    color: #fff;
    text-align: center;
    font-weight: 700;
    background: #149639;
    border-radius: 25px;
  }
  .methods {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: 50px;
    border-top: 1px solid #cccccc;
    span {
      position: absolute;
      top: 0;
      left: 50%;
      margin-top: -10px;
      margin-left: -50px;
      display: block;
      width: 100px;
      height: 20px;
      text-align: center;
      background: #fff;
      font-size: 14px;
      color: #a9a9a9;
      z-index: 99;
    }
  }
}
</style>